<template>
	<!-- 三进统计页面的头部份 -->
	
	<view>
		<u-row style="margin-top: 30rpx;">
			<u-col :span="12" class="my-sub-title" style="text-align: center;">
					{{ filter_time }}
					<u-icon 
						name="arrow-down" 
						@click="filter_timer_show = true">
					</u-icon>
			</u-col>
		</u-row>
		
		<!-- 时间过滤选择 -->
		<u-picker
			mode="time" 
			v-model="filter_timer_show" 
			:params="time_params" 
			@confirm="filterTimeConfirm">
		</u-picker>
		
		<u-row style="margin-top: 30rpx;">
			<u-col :span="6" >
				<view class="flex-col" style="color: #39B54A;">
					<view class="numeric">{{ data.finished }}</view>
					<view class="desc">已提交</view>
				</view>
			</u-col>
			
			
			<u-col :span="6">
				<view class="flex-col" style="color: #d11e21;">
					<view class="numeric">{{ data.unfinished }}</view>
					<view class="desc">未提交</view>
				</view>
			</u-col>
		</u-row>		
	</view>
</template>

<script>
	export default {
		props: {
			ft: String,
			data: Object
		},
		mounted() {
			// console.log('目前的筛选时间是：', this.ft)
			this.filter_time = this.ft
			
		},
		onLoad(params) {
			// console.log('params', params)
			// this.filter_time = params.filter_time?'1':'2'
		},
		data() {
			return {
				filter_timer_show: false,
				filter_time: '2021-06-10',
				
				
				time_params: {
					year: true,
					month: true,
					day: true,
					// hour: true,
					// minute: true,
					// second: false		
				},
			}
		},
		methods:{
			filterTimeConfirm(e) {
				this.filter_time = e.year + '-' + e.month + '-' + e.day
				this.$emit('time_filter_change', this.filter_time)
			}
			
		}
	}
</script>

<style>
.flex-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.numeric {
		font-weight: 600;
		font-size: 15px;
	}
	
	.desc {
		font-weight: 700;
		font-size: 11px;
	}
</style>
